<template>
  <div>
    <!-- 公共组件 -->
    <headerCom></headerCom>
     首页
     <button @click="$router.push('/cart')">跳转cart页</button>
     <button @click="toCart">使用组合式api跳转 并传参</button>
     <hr>
     <h1>{{week}} {{day}}</h1>
     <button @click="changeWeek">改变星期</button>
     <hr>
     <h1>{{person.name  }}</h1>
      <h1>{{person.age  }}</h1>
     <button @click="person.age++">改变年龄</button>
  </div>
</template>
<script setup>
import {watch,ref,reactive,watchEffect} from 'vue'
//  vue3 语法糖写法  setup环境中 书写代码
// vue3 的setup中不支持this
  import {useRouter} from 'vue-router'
// useRouter 获取路由实例 获取路由操作对象  
  let router=useRouter();

 
let toCart=()=>{
  // router.push  router.replace  router.go
// 跳转并query传参
    router.push({
         name:"cart",
         query:{
           pid:9527
         }
    })
}
// vue3 watch的使用
 let week=ref("星期一");
 let day=ref("9月9日")
//  watch监听 ref的变化
 watch(week,(newVal,oldVal)=>{
    console.log(newVal,oldVal)
 })

 let changeWeek=()=>{
    week.value="星期二"
 }
let person=reactive({
  name:"张三",
  age:18
})
// 整体的监听 reactive的变化
// watch(person,(newVal)=>{
//   console.log(newVal,oldVal)
// })

// 监听reactive中某个属性的变化 写成箭头函数返回值形式
// watch(
// 监听的数据,
// (newVal)=>{},
// {deep:true,immediate:true}
//)
watch(()=>person.age,(newVal)=>{
    console.log(newVal)
},{
   deep:true, //深度监听
   immediate:true//进入组件立即监听
})
//vue3  watchEffect 自动监听所有响应式数据的变化
// watch 和watchEffect的区别
// watch 监听 具体数据的变化，接受新旧的值，watch 开启深度监听 deep：true, 立即监听immediate :true 
// watchEffect 不需要指明具体监听数据，在内部直接可以使用最新所有的数据值 ，watchEffect 进入立即监听
watchEffect(()=>{
   console.log("watchEffect监听到",person.age) //打印最新年龄、
   console.log("watchEffect监听到",week.value) //打印最新星期
})



</script>
<style lang="scss">
  
</style>